<script setup>
import { GlobalStore } from "@/stores/index";
import { userPlaylist } from '@/api/api'
const globalstore = GlobalStore()
const router = useRouter()
const state = reactive({
	list: [],
})
const {
	list,
} = toRefs(state)


watch(() => globalstore.userInfo.userId, async () => {
	if (!globalstore.userInfo.userId) return
	const { data } = await userPlaylist(globalstore.userInfo.userId)
	state.list = data.playlist
},
	{ immediate: true }
)
const toUserList = (e) => {
	router.push({ path: "/playList", query: { id: e } })

}
</script>
<template>
	<el-scrollbar class="left-side">
		<div class="side-wrapper">
			<div class="side-title flex" style="justify-content: center;">
				<img src="@/static/img/logo2.png" alt="" style="width: 150px;">
			</div>
			<div class="side-menu">
				<router-link to="/">
					<svg viewBox="0 0 512 512">
						<g xmlns="http://www.w3.org/2000/svg" fill="currentColor">
							<path d="M0 0h128v128H0zm0 0M192 0h128v128H192zm0 0M384 0h128v128H384zm0 0M0 192h128v128H0zm0 0"
								data-original="#bfc9d1" />
						</g>
						<path xmlns="http://www.w3.org/2000/svg" d="M192 192h128v128H192zm0 0" fill="currentColor"
							data-original="#82b1ff" />
						<path xmlns="http://www.w3.org/2000/svg"
							d="M384 192h128v128H384zm0 0M0 384h128v128H0zm0 0M192 384h128v128H192zm0 0M384 384h128v128H384zm0 0"
							fill="currentColor" data-original="#bfc9d1" />
					</svg>
					首页
				</router-link>

			</div>
		</div>
		<div class="side-wrapper">
			<div class="side-title">发现</div>
			<div class="side-menu">
				<router-link to="/musiclibrary">
					<svg t="1648737091540" class="icon" viewBox="0 0 1048 1024" version="1.1"
						xmlns="http://www.w3.org/2000/svg" p-id="8016" width="16" height="16">
						<path
							d="M897.382953 128.420008h151.612645v40.976391h-151.612645zM0 128.420008h495.814326v40.976391H0zM770.356142 390.668908h278.639456v40.97639h-278.639456zM0 390.668908h495.814326v40.97639H0zM733.477391 636.527251h315.518207v40.97639h-315.518207zM0 636.527251h131.12445v40.97639H0z"
							fill="#525B72" p-id="8017"></path>
						<path
							d="M440.598639 786.234494m-192.691476 0a192.691477 192.691477 0 1 0 385.382953 0 192.691477 192.691477 0 1 0-385.382953 0Z"
							fill="#525B72" p-id="8018"></path>
						<path
							d="M440.598639 999.414166c-117.548972 0-213.179672-95.634798-213.179671-213.179672s95.6307-213.175574 213.179671-213.175574c117.548972 0 213.179672 95.6307 213.179672 213.175574S558.147611 999.414166 440.598639 999.414166z m0-385.382954c-94.95459 0-172.203281 77.252789-172.203281 172.199184 0 94.95459 77.248691 172.203281 172.203281 172.203281 94.950492 0 172.203281-77.252789 172.203282-172.203281 0-94.946395-77.252789-172.199184-172.203282-172.199184z"
							fill="#525B72" p-id="8019"></path>
						<path d="M633.290116 786.234494V196.481793L792.893157 36.878752v217.994397l-159.603041 159.603041"
							fill="#525B72" p-id="8020"></path>
						<path
							d="M653.778311 786.234494h-40.97639V196.481793c0-5.433469 2.155358-10.645666 6.003041-14.489252l159.603041-159.603041A20.488195 20.488195 0 0 1 813.381353 36.878752v217.994397a20.475902 20.475902 0 0 1-6.003042 14.489252l-153.6 153.604098v363.267995z m0-581.266491v160.045586l118.626651-118.62665V86.341353l-118.626651 118.62665z"
							fill="#525B72" p-id="8021"></path>
						<path
							d="M431.866571 661.154062c75.929252 0 137.705258 54.265034 137.705258 120.974597S507.795822 903.119648 431.866571 903.119648s-137.705258-54.273229-137.705258-120.982793 61.776006-120.982793 137.705258-120.982793z m-199.169844 120.982793c0 100.605234 89.34902 182.447379 199.169844 182.447379S631.036415 882.742089 631.036415 782.136855c0-100.601136-89.34902-182.439184-199.169844-182.439184s-199.169844 81.838047-199.169844 182.439184z"
							fill="#525B72" opacity=".1" p-id="8022"></path>
						<path d="M618.804962 349.995742L779.534854 189.269948l28.970308 28.970308-160.725794 160.729892z"
							fill="#525B72" opacity=".15" p-id="8023"></path>
						<path
							d="M397.77559 758.955416a32.777015 42.0008 76.768 1 0-15.004963-63.81365 32.777015 42.0008 76.768 1 0 15.004963 63.81365Z"
							fill="#525B72" opacity=".53" p-id="8024"></path>
					</svg>
					乐库
				</router-link>
				<router-link to="/mv">
					<svg viewBox="0 0 58 58" fill="currentColor">
						<path
							d="M57 6H1a1 1 0 00-1 1v44a1 1 0 001 1h56a1 1 0 001-1V7a1 1 0 00-1-1zM10 50H2v-9h8v9zm0-11H2v-9h8v9zm0-11H2v-9h8v9zm0-11H2V8h8v9zm26.537 12.844l-11 7a1.007 1.007 0 01-1.018.033A1.001 1.001 0 0124 36V22a1.001 1.001 0 011.538-.844l11 7a1.003 1.003 0 01-.001 1.688zM56 50h-8v-9h8v9zm0-11h-8v-9h8v9zm0-11h-8v-9h8v9zm0-11h-8V8h8v9z" />
					</svg>
					视频
				</router-link>
				<router-link to="/radio">
					<svg t="1648736357046" class="icon" viewBox="0 0 1024 1024" version="1.1"
						xmlns="http://www.w3.org/2000/svg" p-id="2542" width="16" height="16">
						<path
							d="M836.778667 273.749333H271.530667l96.085333-96.085333c13.312-13.312 13.312-34.986667 0-48.298667s-34.986667-13.312-48.298667 0l-166.229333 166.058667c-0.512 0.512-0.853333 1.194667-1.365333 1.706667a102.570667 102.570667 0 0 0-37.376 79.018666v419.84c0 56.490667 45.909333 102.4 102.4 102.4h619.690666c56.490667 0 102.4-45.909333 102.4-102.4v-419.84c0.341333-56.490667-45.568-102.4-102.058666-102.4z m34.133333 522.24c0 18.773333-15.36 34.133333-34.133333 34.133334H217.088c-18.773333 0-34.133333-15.36-34.133333-34.133334v-419.84c0-18.773333 15.36-34.133333 34.133333-34.133333h619.690667c18.773333 0 34.133333 15.36 34.133333 34.133333v419.84z"
							p-id="2543" fill="#525B72"></path>
						<path
							d="M383.317333 438.954667c-76.458667 0-138.581333 62.122667-138.581333 138.581333 0 76.458667 62.122667 138.581333 138.581333 138.581333 76.288 0 138.581333-62.122667 138.581334-138.581333-0.170667-76.458667-62.293333-138.581333-138.581334-138.581333z m0 208.725333c-38.741333 0-70.314667-31.573333-70.314666-70.314667s31.573333-70.314667 70.314666-70.314666 70.314667 31.573333 70.314667 70.314666-31.573333 70.314667-70.314667 70.314667zM757.930667 477.866667h-136.533334c-18.773333 0-34.133333 15.36-34.133333 34.133333s15.36 34.133333 34.133333 34.133333h136.533334a34.133333 34.133333 0 1 0 0-68.266666zM757.930667 619.52h-136.533334c-18.773333 0-34.133333 15.36-34.133333 34.133333s15.36 34.133333 34.133333 34.133334h136.533334a34.133333 34.133333 0 1 0 0-68.266667z"
							p-id="2544" fill="#525B72"></path>
					</svg>
					电台
					<span class="notification-number updates">3</span>
				</router-link>
				<router-link to="/songList">
					<svg t="1648736548811" class="icon" viewBox="0 0 1024 1024" version="1.1"
						xmlns="http://www.w3.org/2000/svg" p-id="4365" width="20" height="20">
						<path
							d="M964.608 234.496c-46.08-52.565333-104.789333-93.696-169.642667-118.784a34.030933 34.030933 0 0 0-46.421333 31.744v420.352a178.005333 178.005333 0 0 0-110.933333-38.741333c-98.816 0-179.2 80.384-179.2 179.2S538.794667 887.466667 637.610667 887.466667s179.2-80.384 179.2-179.2c0-1.877333-0.170667-3.754667-0.341334-5.632 0-1.024 0.341333-1.877333 0.341334-2.901334V201.216c36.181333 20.309333 69.12 46.933333 96.597333 78.165333 12.458667 14.165333 34.133333 15.530667 48.128 3.072 14.165333-12.288 15.530667-33.792 3.072-47.957333zM637.610667 819.2c-61.098667 0-110.933333-49.834667-110.933334-110.933333s49.834667-110.933333 110.933334-110.933334 110.933333 49.834667 110.933333 110.933334-49.834667 110.933333-110.933333 110.933333zM185.344 307.2h392.533333c18.773333 0 34.133333-15.36 34.133334-34.133333s-15.36-34.133333-34.133334-34.133334h-392.533333a34.133333 34.133333 0 1 0 0 68.266667zM424.277333 460.8h-238.933333c-18.773333 0-34.133333 15.36-34.133333 34.133333s15.36 34.133333 34.133333 34.133334h238.933333c18.773333 0 34.133333-15.36 34.133334-34.133334s-15.36-34.133333-34.133334-34.133333zM321.877333 682.666667h-136.533333c-18.773333 0-34.133333 15.36-34.133333 34.133333s15.36 34.133333 34.133333 34.133333h136.533333c18.773333 0 34.133333-15.36 34.133334-34.133333s-15.36-34.133333-34.133334-34.133333z"
							p-id="4366" fill="#525B72"></path>
					</svg>
					歌单
				</router-link>
				<router-link to="/animation">
					<svg t="1686815711340" class="icon" viewBox="0 0 1024 1024" version="1.1"
						xmlns="http://www.w3.org/2000/svg" p-id="3536" width="28" height="28">
						<path
							d="M844.832 885.344c-30.485333-20.714667-77.781333-18.965333-144.053333 9.386667A425.024 425.024 0 0 1 512 938.666667C276.362667 938.666667 85.333333 747.637333 85.333333 512S276.362667 85.333333 512 85.333333s426.666667 191.029333 426.666667 426.666667a425.013333 425.013333 0 0 1-44.405334 189.717333 32 32 0 0 1-57.301333-28.490666A361.013333 361.013333 0 0 0 874.666667 512c0-200.298667-162.368-362.666667-362.666667-362.666667S149.333333 311.701333 149.333333 512s162.368 362.666667 362.666667 362.666667c56.704 0 111.488-13.013333 161.12-37.653334l1.6-0.746666c84.746667-36.437333 154.176-39.125333 206.08-3.861334a32 32 0 1 1-35.968 52.938667zM512 416a64 64 0 1 1 0-128 64 64 0 0 1 0 128z m160 160a64 64 0 1 1 0-128 64 64 0 0 1 0 128zM512 736a64 64 0 1 1 0-128 64 64 0 0 1 0 128zM352 576a64 64 0 1 1 0-128 64 64 0 0 1 0 128z"
							fill="#000000" p-id="3537"></path>
					</svg>
					动漫
				</router-link>
				<router-link to="/testPlayer">
					<svg t="1686815748873" class="icon" viewBox="0 0 1024 1024" version="1.1"
						xmlns="http://www.w3.org/2000/svg" p-id="4565" width="28" height="28">
						<path
							d="M704 128a32 32 0 0 1 0 64h-21.333333v160.789333a10.666667 10.666667 0 0 0 1.088 4.693334l180.874666 369.6c28.48 58.218667 4.384 128.490667-53.813333 156.970666A117.333333 117.333333 0 0 1 759.242667 896H264.746667c-64.8 0-117.333333-52.533333-117.333334-117.333333a117.333333 117.333333 0 0 1 11.946667-51.573334l180.874667-369.621333a10.666667 10.666667 0 0 0 1.088-4.693333V192h-21.333334a32 32 0 0 1-31.946666-30.122667L288 160a32 32 0 0 1 32-32z m51.968 522.666667H268.010667l-51.157334 104.554666A53.333333 53.333333 0 0 0 264.757333 832H759.253333a53.333333 53.333333 0 0 0 47.893334-76.778667L755.978667 650.666667zM618.666667 192H405.333333v160.789333a74.666667 74.666667 0 0 1-7.594666 32.821334L299.328 586.666667h425.322667l-98.389334-201.066667A74.666667 74.666667 0 0 1 618.666667 352.8V192z"
							fill="#000000" p-id="4566"></path>
					</svg>
					测试
				</router-link>

			</div>
		</div>
		<div class="side-wrapper">
			<div class="side-title">美化</div>
			<div class="side-menu">
				<router-link to="/theme">
					<svg viewBox="0 0 512 512" fill="currentColor">
						<path
							d="M499.377 46.402c-8.014-8.006-18.662-12.485-29.985-12.613a41.13 41.13 0 00-.496-.003c-11.142 0-21.698 4.229-29.771 11.945L198.872 275.458c25.716 6.555 47.683 23.057 62.044 47.196a113.544 113.544 0 0110.453 23.179L500.06 106.661C507.759 98.604 512 88.031 512 76.89c0-11.507-4.478-22.33-12.623-30.488zM176.588 302.344a86.035 86.035 0 00-3.626-.076c-20.273 0-40.381 7.05-56.784 18.851-19.772 14.225-27.656 34.656-42.174 53.27C55.8 397.728 27.795 409.14 0 416.923c16.187 42.781 76.32 60.297 115.752 61.24 1.416.034 2.839.051 4.273.051 44.646 0 97.233-16.594 118.755-60.522 23.628-48.224-5.496-112.975-62.192-115.348z" />
					</svg>
					主题
				</router-link>
			</div>
		</div>
		<div class="side-wrapper">
			<div class="side-title">收藏</div>
			<div class="side-menu">
				<a href="javascript:;" style="padding: 5px 10px 5px 10px;" @click="toUserList(item.id)"
					v-for="(item, index) in list" :key="index">
					<img :src="item.coverImgUrl + '?param=28y28'" alt="" class="side-menu-cover">
					<div class="side-menu-title">
						<span>{{ item.name }}</span>
						<span style="font-size: 8px;">共{{ item.trackCount }}首</span>
					</div>
				</a>
			</div>
	</div>
</el-scrollbar></template>
<style lang='scss' scoped></style>
